<template>
  <div class="Home">
    <Header></Header>
    <Aside></Aside>
    <div class="content-box" :class="{ 'content-collapse': collapse }">
      <div class="content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<style scoped>
body {
  margin: 0;
  padding: 0;
}
.content-box {
  position: absolute;
  left: 150px;
  right: 0;
  top: 70px;
  bottom: 0;
  overflow-y: scroll;
  -webkit-transition: left 0.3s ease-in-out;
  transition: left 0.3s ease-in-out;
  background: #f7f9ff;
  box-sizing: border-box;
  padding: 20px;
}
.content-collapse {
  left: 65px;
}
.content {
  box-shadow: 0 0 5px #a5a5a5;
}
</style>

<script>
import Header from "../TheHeader/TheHeader"
import Aside from "../TheAside/TheAside"
import bus from "../../assets/js/bus"
export default {
  components: {
    Header,
    Aside
  },
  name: "Home",
  data() {
    return {
      collapse: false
    }
  },
  created() {
    //通过Bus进行组件间的通信，来折叠侧边栏
    bus.$on("collapse", (msg) => {
      this.collapse = msg
    })
  }
}
</script>
